<template>
    <div id="nav">
         <div class="logo">
             <a href="https://www.csdn.net/?spm=1000.2115.3001.4476">
                  <img  title="csdn首页"  src="~@/assets/logo.png" alt="">
             </a>
          </div>   
          <ul>
               <li><a>首页</a></li>
               <li><a>博客</a></li>
               <li><a>程序员客院</a></li>
               <li><a>下载</a></li>
               <li><a>论坛</a></li>
               <li><a>问答</a></li>
               <li><a>代码</a></li>
               <li><a>直播</a></li>
               <li><a>能力直播</a></li>
               <li><a>高校认证</a></li>
            </ul>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style  scoped>
#nav{
  height: 48px;
  line-height: 48px;
  width: 1280px;
  min-width: 1280px;
  position: relative;
}
.logo img{
    display: block;
    width: 80px;
    min-width: 80px;
    height: 44px;
    margin-top: calc((48px - 44px)/ 2);
    
}
ul>li>a{
  padding: 0 10px;
  margin: 0;
  width: auto;
  height:44px;
  display: block;
  margin-top: 0;
  text-align: center;
  font-weight: 300;
}
ul{
  display: block;
   width: auto;
   height: 44px;
   position: absolute;
   top: 0;
   left:100px;
   margin: 0;
   padding: 0;
   background:gray;
}

li{
  list-style-type:none;
  list-style: none;
  float: left;
  height: 100%;
  width: auto;
  padding: 0 2px;
}
li:hover{
  background:#f5f6f7;
}
 
</style>